<%@ page language="java" contentType="text/html; charset=UTF-8"
	isELIgnored="false" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<link rel="stylesheet" href="/plugins/layui/css/layui.css" />
<style>
	.layui-form-label{
		width:auto;
	}
</style>
</head>
<body>
	<form action="/user" method="post" class="layui-form">
		<div class="layui-form-item" style="padding-top: 10px">
			<div class="layui-inline">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
				<input type="text" name="username" id="username" autocomplete="off" class="layui-input"/>
				</div>
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" autocomplete="off" class="layui-input"/> 
					<input type="hidden" value="list" name="action"/> 
					<input id="pageSize" type="hidden" name="pageSize" value="5"/>
					<input id="pageNum" type="hidden" name="pageNum" value="1" />
				</div>
				<label class="layui-form-label">角色</label>
				<div class="layui-input-inline">
					<select name="roleId" id="roleId">
					</select>
				</div>
				<div class="layui-input-inline">
					<input id="searchBtn" type="submit" class="layui-btn" value="查询">
					<a href="/user?action=add" class="layui-btn">新增</a>
				</div>
			</div>
		</div>
	</form>
	<table id="userTable" class="layui-table">
		<thead>
			<tr>
				<th>序号</th>
				<th>用户名</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>email</th>
				<th>角色</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${users }" var="u" varStatus="s">
				<tr>
					<td>${s.count }</td>
					<td><input class="userid" type="hidden" value="${u.id }" />${u.username }</td>
					<td>${u.name }</td>
					<td>${u.age }</td>
					<td>${u.email }</td>
					<td>${u.roleName }</td>
					<td><a href="/user?action=edit&id=${u.id }" class="layui-btn layui-btn-xs">编辑</a> 
					<a href="javascript:;" onclick="f1(${u.id})" class="layui-btn layui-btn-xs delBtn">删除</a>
					</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	<div id="page"></div>
	<script src="/plugins/layui/layui.js" charset="UTF-8"></script>
	<script>
			var $ = null;
			layui.use(['table','form','layer','laypage'],function(){
				var table = layui.table;
				var form = layui.form;
				
				$ = layui.jquery;
				var layer = layui.layer;
				var laypage = layui.laypage;
				var abc = "${abc}";
				var sum = "${sum}";
				var pageNum = '${pageNum}';
				var pageSize = '${pageSize}';
				if(abc == null || abc == ""){
					$("#searchBtn").click();
				}
				laypage.render({
				    elem: 'page'
				    ,count: sum
				    ,layout: ['limit', 'prev', 'page', 'next', 'count']
				    ,limit:pageSize
				    ,curr:pageNum
				    ,limits:[5,10,20,30]
				    ,jump: function(obj,first){
				    	if(!first){
					       $("#pageNum").val(obj.curr);
					       $("#pageSize").val(obj.limit);
					       $("#searchBtn").click();
				    	}
				    }
				  });
				$.get("/role?action=listAll",function(ret){
					var html ="";
					$.each(ret,function(i,v){
						html+="<option value='"+v.id+"'>"+v.name+"</option>"
					});
					$("#roleId").html(html);
					form.render();
				});
			});
			function f1(userId){				
				var b = function(){
					$.get("/user?action=del&id="+userId,function(){
						$("#searchBtn").click();
						layer.closeAll();
					});
				};
				var c = function(){
					console.log("点击了取消");
				};
				layer.confirm("你确定要删除该用户吗？",b,c); 
			}
			// Ajax  Asynchronous JavaScript And XML
			
			//Ajax 并非编程语言.ajax是一个令人误导的名称。Ajax应用程序可能使用XML
			//来传输数据。但将数据作为纯文本或JSON文本传输也同样常见。
			//ajax　允许通过与场景后面的web服务器交换数据来异步的更新网页。
			//这就意味着可以只更新网页的一部分，而不需要重新加载整个页面。
			
			//1.网页中发生一个事件(按钮点击事件)
			//2.由javascript创建XMLHttpRequest对象
			//3.XMLHttpRequest对象向web服务器发送请求
			//4.服务器处理请求
			//5.服务器响应发送回页面
			//6.由javascript读取响应数据
			//7.由javascript执行正确的动作(更新页面的一部分)
			
			//jquery里用ajax
			
			//写法：$.ajax(setting);
			//常用的setting举例
			//url:表示发送请求的地址
			//type: get/post　　请求方式
			//data:发送到服务器的数据,将会自动的转成请求字符串的格式
			//dataType:预期服务器返回数据的类型
			//		xml:
			//	    JSON:
			//      html:
			//      text:
			//　success 成功之后执行动作
			// error失败之后执行动作
			/* $.ajax(
				url:'/user?action=del',
				type:'post',
				data:{id:1},
				dataType:'JSON',
				success:function(ret){
					
				},
				error:function(){
					
				}
			);
			
			$.get("/user?action=del&id=1",function(){
				
			});
			$.post(); */
			
			
		</script>
</body>
</html>